<template>
	<view class="container">

		<scroll-view :scroll-top="scrollTop" scroll-with-animation="true" scroll-y="true" class="scroll-Y"
			@scrolltolower="lower" @scroll="scroll">
			<view class="bg">
				<text>苏科旅行</text>
			</view>
			<!-- 搜索 -->
			<view class="buy-ticket">
				<!-- 选择地点 -->
				<view class="buy-ticket-place">
					<navigator :url="`./indexPage/serachCity?id=1`">{{cityNameStart}}</navigator>
					<image src="../../static/icon/fly.png" mode="widthFix"></image>
					<navigator :url="`./indexPage/serachCity?id=2`">{{cityNameEnd}}</navigator>
				</view>

				<!-- 选时间 -->
				<view class="buy-ticket-time" @click="openCalendar">
					<text>{{time}}</text>
				</view>

				<!-- 选仓位 -->
				<view class="buy-ticket-seat">
					<text>经济舱</text>
				</view>

				<!-- 搜索机票 -->
				<view class="buy-ticket-search">
					<button class="btn btn-1" url="indexPage/airplaneList" @click="searchTicket">搜索</button>
				</view>

				<!-- 其他信息 -->
				<view class="other" @click="btnOther">
					<view>机票订单</view>
					<text>|</text>
					<view>航班助手</view>
					<text>|</text>
					<view>在线选座</view>
					<text>|</text>
					<view>低价订阅</view>
				</view>
			</view>

			<!-- 新闻 -->
			<view class="news">
				<!-- <image src="../../static/img/news.png" mode="widthFix"></image> -->
				<news></news>
			</view>

			<!-- 日期选择 -->
			<view>
				<uni-calendar ref="calendar" :startDate="timeNow" endDate="2022-12-31" :insert="false"
					@confirm="confirm">
				</uni-calendar>
			</view>

			<!-- 签名 -->
			<view class="sign">
				宋清卿，杨吉铖，李健
			</view>

			<!-- <uni-popup ref="popup" type="bottom" background-color="#fff">
			</uni-popup> -->
		</scroll-view>

		<!-- 返回顶部 -->
		<view class="back-top" @tap="goTop" v-show="isShow">
			<image src="../../static/icon/backTop.png" mode="widthFix"></image>
		</view>

	</view>
</template>

<script>
	import {
		formatTime,
		formatDate,
		NowTime
	} from '../../common/utils.js'
	import {
		selectByStartCityAndEndCity,
		selectZhuanByStartCityAndEndCity,
		Islogin
	} from '../../common/request.js'
	import news from "./childComps/news.vue"

	export default {
		data() {
			return {
				cityNameStart: '',
				cityNameEnd: '',
				time: '',
				timeNow: '',
				isShow: false, // 是否显示返回顶部
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
			}
		},
		components: {
			news
		},
		methods: {
			// 打开日历
			openCalendar() {
				this.$refs.calendar.open();
			},
			// 获取当前日期时间戳
			confirm(e) {
				let date = new Date(e.fulldate)
				this.time = formatDate(date, 'yyyy-MM-dd')
				// console.log(e);
			},
			// 搜索
			searchTicket() {
				// 测试是否登录
				// Islogin().then(res=>{
				// 	console.log(res);
				// })
				selectByStartCityAndEndCity(this.cityNameStart, this.cityNameEnd, formatTime(this.time)).then(res => {
					this.$store.commit('update', ['flightData', res.data]);
					selectZhuanByStartCityAndEndCity(this.cityNameStart, this.cityNameEnd, formatTime(this.time))
						.then(res => {
							this.$store.commit('update', ['flightRecData', res.data]);
							uni.navigateTo({
								url: "indexPage/airplaneList",
							})
						})
				})
			},
			// 其他信息
			btnOther() {
				uni.showToast({
					icon: "none",
					duration: 1000,
					title: "此功能尚未开发完成"
				})
			},
			// 滚动到底部
			lower(e) {
				uni.showToast({
					icon: "none",
					duration: 1000,
					title: "没有更多了"
				})
			},
			// 滚动
			scroll(e) {
				this.isShow = e.detail.scrollTop > 400 ? true : false
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
					setTimeout(() => {
						this.isShow = this.scrollTop > 400 ? true : false
					}, 10)
				});
			}
		},
		created() {
			this.timeNow = NowTime()
			this.time = NowTime()
		},
		onShow() {
			this.cityNameStart = getApp().globalData.cityNameStart
			this.cityNameEnd = getApp().globalData.cityNameEnd
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #eee;
		height: 100%;

		// 返回顶部
		.back-top {
			width: 100rpx;
			height: 100rpx;
			position: fixed;
			right: 40rpx;
			bottom: 60rpx;
		}
		
		image {
			display: inline-block;
		}
		
		
		.back-top image {
			animation: myfirst 2s infinite;
		}
		
		@keyframes myfirst {
			0% {
				transform: translate(0px, 0px);
			}
		
			50% {
				transform: translate(0px, -20px);
			}
		
			100% {
				transform: translate(0px, 0px);
			}
		}

		.scroll-Y {
			height: 100%;

			.bg {
				height: 300rpx;
				background-color: #8da9f3;
				border-radius: 0 0 50rpx 50rpx;
				text-align: center;

				text {
					font-size: 50rpx;
					font-weight: 700;
					line-height: 200rpx;
					color: white;
				}
			}

			.buy-ticket {
				position: absolute;
				left: 30rpx;
				right: 30rpx;
				top: 200rpx;
				border-radius: 15rpx;
				background-color: white;
				padding: 50rpx 45rpx;
				border-bottom: #eee solid 30rpx;

				.buy-ticket-place {
					display: flex;
					justify-content: space-between;
					font-size: 46rpx;
					font-weight: 700;
					color: black;

					image {
						width: 60rpx;
					}
				}

				.buy-ticket-time {
					margin-top: 40rpx;
					padding-bottom: 20rpx;
					border-bottom: 2rpx solid #eee;

					text {
						font-size: 42rpx;
						font-weight: 700;
					}
				}

				.buy-ticket-seat {
					margin-top: 36rpx;
				}

				.buy-ticket-search {
					margin-top: 36rpx;

					.btn {
						flex: 1 1 auto;
						margin: 10px;
						// padding: 30px;
						text-align: center;
						text-transform: uppercase;
						transition: 0.5s;
						background-size: 200% auto;
						color: white;
						/* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
						box-shadow: 0 0 20px #eee;
						border-radius: 10px;
					}


					.btn:hover {
						background-position: right center;
						/* change the direction of the change here */
					}

					.btn-1 {
						background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
					}
				}

				.other {
					display: flex;
					margin-top: 40rpx;
					justify-content: space-around;
				}
			}

			.news {
				padding-top: 500rpx;
				border-radius: 15rpx;
				margin-left: 30rpx;
				margin-top: 20rpx;
				margin-right: 30rpx;
				background-color: white;
				// padding: 50rpx 45rpx;
			}

			/* 签名 */
			.sign {
				font-size: 26rpx;
				line-height: 100rpx;
				text-align: center;
				height: 100rpx;
			}

			uni-popup {
				// height: 500rpx;
			}
		}

	}
</style>
